<template>
  <div id="app">
    <!--导航栏视图-->
    <div class="topBanner">
      <span>广州</span>
      <group gutter="0" labelWidth="1rem">
        <x-input placeholder="想要买什么呢?想想看..." class="bannerInput" border="0">
          <img slot="label" style="padding-right:0.1rem;display:block;" src="../../assets/home_search.png">
        </x-input>
      </group>
      <div class="topRight">
        <img src="../../assets/sweep_pic.png" alt="" slot="right">
        <p>免费挪车</p>
      </div>
    </div>
    <mt-swipe height="4rem" auto loop style="margin-top:0rem">
      <mt-swipe-item v-for="item in picData">
        <!--要加跳转-->
        <div class="swipe-content">
          <a style="display: block" @click="bannerPage(item)"><img :src="item.bannerPath==null?'assets/lazy.gif':item.bannerPath"></a>
          <div class="swiper-pagination-title">
            <h3>{{item.bannerInfo}}</h3>
          </div>
        </div>
      </mt-swipe-item>
    </mt-swipe>
    <devider-Title title="推荐艺人" fontSize="0.25rem" >

    </devider-Title>
    <my-scroller lock-y :scrollbar-x=false :bounce=true>
      <div class="box1" :style="{width: (recommandArr.length?(recommandArr.length*3+0.15*(recommandArr.length-1)+0.2):7.5) + 'rem'}">
        <div class="box1-item" v-for="item in recommandArr"><img :src="item.recommendPath" alt="" @click="goArtistDetail(item.recommendAId)"></div>
      </div>
    </my-scroller>
    <devider-Title title="最新需求" fontSize="0.25rem" >

    </devider-Title>
    <div v-for="item in artistArr">
      <div class="contentArt" >
        <img :src="item.artistPicPath" alt="">
        <div class="row1">
          <span>{{item.aName}}</span>
          <span>粉丝:{{item.aFansNum}}</span>
          <button>预约</button>
        </div>
        <div class="row2">
          <span>演出费:<i>¥{{item.aMoney}}</i></span>
          <span>保证金:<i>¥{{item.aCash}}</i></span>
        </div>
        <div class="row3">
          <span>演出量:<i>{{item.aOrderNum}}</i></span>
          <span>好评率:<i>{{item.aOrderNum}}</i></span>
        </div>
        <div class="divider"></div>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>
<script>
  import { XTextarea, XInput, Group, Scroller, Alert} from 'vux'
  import { Swiper, SwiperItem, LoadMore } from 'vux'
  import footer from 'common/vue/footer.vue'
  import API from '../../../config/api/API'
  import deviTitle from  'common/vue/customHead.vue'

  var api = new API();

  export default {
    data () {
      return {
        dataList: [],
        picData: null,            // banner数据
        recommandArr: null,       // 推荐艺人数据
        artistArr: null,          // 艺人数据
        startPage: 1,             // 从第几页开始加载
        loading: false,           // 是否加载数据
        dataCotegory: null,       // 分类列表
        selectCategoryCode: 0,    // 当前列表分类id
      }
    },
    components: {
      XTextarea,
      XInput,
      Group,
      'mt-swipe': Swiper,
      'mt-swipe-item': SwiperItem,
      'my-loadmore': LoadMore,
      'my-footer': footer,
      'devider-Title': deviTitle,
      'my-scroller': Scroller,
      Alert
    },
    created () {
      //获取目录
      this.getHomeData()
    },
    mounted () {

    },
    methods: {
      goArtistDetail (detailId) {
        window.location.href = '/artistDetail/artist_detail.html?artistId=' + detailId
      },
      onEvent (event) {
        console.log('on', event)
      },
      getHomeData() {
        let that = this;
        let response = api.getList("app/banner/getAppBanner")
        response.then(function (res) {
          var getData = res.data
          that.picData = getData.appBanner
//          console.log(getData)
        })
        api.getList("app/artist/getRecommendArtists",{
          "cityName":"广州"
        }).then(function (res) {
          that.recommandArr = res.data.recommendList
//          console.log(res.data.recommendList);
        })
        api.getList("app/artist/getArtistByType",{
          "tokenContent":"",
          "cityName":"广州",
          "pageSize":"10",
          "pageNum":"1"
        }).then(function (res) {
          var getData = res.data;
          if(getData.message) {
            that.artistArr = getData.pageInfo.list
//            that.showPluginAuto()
          }

          console.log('输出数据是', that.artistArr);
        })
      },
      showPlugin () {
        this.$vux.alert.show({
          title: 'VUX is Cool',
          content: "数据请求成功",
          onShow () {
            console.log('Plugin: I\'m showing')
          },
          onHide () {
            console.log('Plugin: I\'m hiding now')
          }
        })
      },
      showPluginAuto () {
        this.showPlugin()
        setTimeout(() => {
          this.$vux.alert.hide()
        }, 3000)
      }
    }
  }

</script>
<style lang="less" rel="stylesheet/less" scoped>
  @import '../../css/Home/home.less';
  html,body{
    background-color: #f3f3f3!important;
  }
</style>
<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 0px;
  }
</style>
